<template>
	<div>
		<Header></Header>
		<div class="banner_bg">
			<img class="" :src="require('@/assets/front-img/video_banner.png')" alt="">
			<div class="banner_title_bg">
				<div class="banner_title_wrapper">
          <img class="info_image" :src="liveInfo.avatarUrl" alt="">
          <div class="info_detail_bg">
            <div class="info_name">{{ liveInfo.name }}</div>
            <div class="data_bg">
              <div class="data_section">
                <div class="like_number">{{ liveInfo.likeNum }}</div>
                <div class="text">获赞</div>
              </div>
              <div class="line"></div>
              <div style="margin-left: 43px" class="data_section">
                <div class="like_number">{{ liveInfo.fansNum }}</div>
                <div class="text">粉丝</div>
              </div>
            </div>
            <div class="des">简介：{{ liveInfo.description }}</div>
          </div>
        </div>
			</div>
		</div>
		<div v-if="list.length > 0" class="wrapper_bg">
			<div class="list_bg">
				<div class="section" v-for="(item) in handleData" :key="item.id">
					<div class="content_bg" v-for="(video,index) in item" :key="index" @click="list_click(video)">
						<div class="img_bg">
							<img :src="video.imgUrl" alt="">
						</div>
						<div class="video_title">
							{{ video.createTime }}
						</div>
					</div>
				</div>
			</div>
		</div>
    <div class="empty_bg" v-else>
			<div class="info_bg">
				<img src="@/assets/front-img/empty_live_icon.png" />
				<div class="info">暂无没有录播记录哦~</div>
			</div>
		</div>
		
		<Pagination v-if="list.length > 0" :pageNo.sync="listQuery.pageNum" :pageSize.sync="listQuery.pageSize" :total="total" :autoScroll="false" @change="getList()" />
		<Footer></Footer>
    <div v-if="show" class="record_bg" @click="handleClick()">
      <div class="wrapper">
        <img style="width: 100%; height: 100%;" :src="liveInfo.avatarUrl" alt="">
        <div class="glass"></div>
        <video class="video" :src="videoSrc" controls="controls" autoplay playsinline></video>
      </div>
    </div>
	</div>
</template>

<script>
import { getLiveRecordList, getLiveinfo } from "@/api/Live";
import Pagination from "@/views/front/components/Pagination";
import Footer from "@/views/front/components/Footer";
import Header from "@/views/front/components/Header";

export default {
  name: 'liveRecord',
  props: {},
  components: {
    Footer,
			Header,
			Pagination,
  },
  data() {
    return {
      total: 0,
      list: [],
      listQuery: {
        videoId: '',
        pageNum: 1,
        pageSize: 8,
      },
      liveInfo: {},
      show: false,
      videoSrc:''
    }
  },
  computed: {
    handleData() {
      let index =0;
      let count = 4;
      let arrTemp = [];
      let experts = this.list;
      for(let i=0;i<this.list.length;i++){
        index = parseInt(i/count);
        if (arrTemp.length <= index) {
            arrTemp.push([]);
        }
        arrTemp[index].push(experts[i])
      }
      return arrTemp
    }
  },
  watch: {},
  methods: {
    getInfo() {
      getLiveinfo({ id: this.listQuery.videoId }).then(response => { 
        this.liveInfo = response || {}
      }).catch(error => {
        console.log(error);
      })
    },
    getList() {
      getLiveRecordList(this.listQuery).then(response => {
        this.list = response.records || []
        this.total = response.total
      }).catch(error => {
        console.log(error);
      })
    },
    list_click(obj) {
      this.videoSrc = obj.liveUrl + obj.liveName
      this.show = true
    },
    handleClick() {
      this.show = false
    }
  },
  created() {
    this.listQuery.videoId = this.$route.query.videoId
    this.getInfo()
    this.getList()
  },
  mounted() {
    
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
}
</script>

<style lang="scss" scoped>
	.banner_bg {
		position: relative;
		width: 100%;
		height: 373px;

		.banner_title_bg {
			position: absolute;
			display: flex;
      justify-content: center;
			align-items: center;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

      .banner_title_wrapper {
        display: flex;
        width: 1300px;
        height: 233px;

        .info_image {
          width: 233px;
          height: 233px;
        }

        .info_detail_bg {
          position: relative;
          margin-left: 69px;
          height: 100%;

          .info_name {
            height: 40px;
            color: rgba(255, 255, 255, 1);
            font-size: 30px;
            font-weight: 700;
            line-height: 40px;
          }

          .data_bg {
            display: flex;
            margin-top: 24px;
            height: 54px;

            .data_section {
              .like_number {
                height: 29px;
                color: rgba(255, 255, 255, 1);
                font-size: 22px;
                font-weight: 400;
                line-height: 29px;
              }

              .text {
                margin-top: 10px;
                height: 21px;
                color: rgba(255, 255, 255, 1);
                font-size: 16px;
                font-weight: 400;
                line-height: 21px;
              }
            }

            .line {
              margin-left: 43px;
              width: 1px;
              height: 60px;
              background: rgba(255, 255, 255, 1);
            }
          }

          .des {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            width: 800px;
            line-height: 18px;
            color: rgba(255, 255, 255, 1);
            font-size: 18px;
            font-weight: 400;
          }
        }
      }
		}
	}

	.wrapper_bg {
		width: 100%;
		margin-top: 50px;
		display: flex;
		justify-content: center;

		.list_bg {
			width: 1300px;

			.section {
				margin-top: 40px;
				width: 100%;
				display: flex;

				&:nth-child(1) {
					margin-top: 0px;
				}

				.content_bg {
					position: relative;
					width: 295px;
					height: 420px;
					border: 1px solid rgba(218, 224, 232, 1);;
					box-sizing:border-box;
					margin-left: 40px;
					background: #fff;
					
					&:nth-child(4n+ 1) {
						margin-left: 0px;
					}
					&:hover,
					&:focus,
					&:visited {
						border: 1px solid rgba(252, 38, 38, 1);
						cursor: pointer;
					}

					.img_bg {
						width: 100%;
						height: 370px;

						img {
							width: 100%;
							height: 100%;
      			}
					}

					.video_title {
						width: 100%;
						height: 50px;
						color: rgba(51, 51, 51, 1);
						font-size: 18px;
						font-weight: 400;
						line-height: 50px;
						text-align: center;
						@include ellipsis($line: 1);
					}
				}
			}
		}
	}

  .record_bg {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 99;

    .wrapper {
      position: absolute;
      // display: flex;
      // justify-content: center;
      // align-items: center;
      width: 1184px;
      height: 650px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      backdrop-filter: blur(20px);

      .glass{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(5px);
      }

      .video {
        position: absolute;
        top: 0;
        left: 50%;
        width: 360px;
        height: 100%;
        transform: translateX(-50%);
      }
      
    }
	}

  .empty_bg {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 500px;

		.info_bg {

			.info {
				margin-top: 40px;
				height: 27px;
				color: rgba(153, 153, 153, 1);
				font-size: 18px;
				font-weight: 400;
			}
		}
	}
</style>
